<template>
  <el-card class="container">
    <div slot="header" class="clearfix">
      <el-button type="primary" icon="Plus" @click="save">添加品牌</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%; margin: 10px 0" border>
      <el-table-column type="index" :index="indexMethod" label="序号" width="60" align="center"/>
      <el-table-column prop="tmName" label="品牌名称" />
      <el-table-column prop="logoUrl" label="品牌LOGO">
        <template #default="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.logoUrl" :fit="'cover'" />
        </template>
      </el-table-column>
      <el-table-column prop="address" label="品牌操作">
        <template #default="scope">
          <el-button size="small" @click="update(scope.$index, scope.row)">Edit</el-button>
          <el-button size="small" type="danger" @click="remove(scope.$index, scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="total" :page-size="10" v-model:current-page="currentPage" @current-change="handleCurrentChange"/>
  </el-card>
  <el-dialog v-model="editDialogVisible" :title="title" width="60%">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" status-icon>
      <el-form-item label="品牌名称" prop="tmName">
        <el-input v-model="ruleForm.tmName" />
      </el-form-item>
      <el-form-item label="品牌LOGO" prop="logoUrl">
        <el-upload style="width: 200px;height: 100px" drag action="/api/admin/product/fileUpload" :on-success="urlSuccess" :show-file-list="false">
          <img v-if="ruleForm.logoUrl" :src="ruleForm.logoUrl" style="width: 100%;height: 100%" />
          <el-icon v-else>
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addCancel">取消</el-button>
        <el-button type="primary" @click="add">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {onMounted, ref, reactive} from 'vue'
import {reqBannerRemove, reqBannerSave, reqPageBannerList} from "@/api/product/bannerManage";
import type {Records, TradeMarkResponseData} from "@/api/product/type";
import {TradeMark} from "@/api/product/type";
import type { FormInstance, FormRules, UploadProps } from 'element-plus'
import {ElMessage} from "element-plus";
const indexMethod = (index: number) => {
  return index + 1
}
// 列表数据
let tableData = ref<Records>([])
onMounted(() => {
  getList()
})
// 分页
let total = ref<Number>(0)
let currentPage = ref<Number>(1)
// 选择页码
const handleCurrentChange = (val: Number) => {
  currentPage.value = val
  getList()
}
// 获取品牌列表
const getList = async () => {
  const res: TradeMarkResponseData = await reqPageBannerList(currentPage.value, 5)
  if (res.code === 200) {
    total.value = res.data.total
    tableData.value = res.data.records
  }
}
// 新增
const editDialogVisible = ref(false)
const title = ref('')
const ruleForm = reactive<TradeMark>({
  tmName: '',
  logoUrl: ''
})
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<TradeMark>>({
  tmName: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  logoUrl: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
})
const save = () => {
  title.value = '新增品牌'
  ruleForm.tmName = ''
  ruleForm.logoUrl = ''
  editDialogVisible.value = true

}
const urlSuccess: UploadProps['onSuccess'] = ( response, uploadFile ) => {
  ruleForm.logoUrl = URL.createObjectURL(uploadFile.raw!)
}
const addCancel = () => {
  editDialogVisible.value = false
}
const add = async () => {
  const res: any = await reqBannerSave(ruleForm)
  console.log(res)
  if (res.code === 200) {
    editDialogVisible.value = false
    ElMessage({
      type: 'success',
      message: res.message
    })
    getList()
  } else {
    editDialogVisible.value = false
    ElMessage({
      type: 'error',
      message: res.message
    })
  }
}

// 更新
const update = (index, row) => {
  editDialogVisible.value = true
  console.log(row)
}
// 删除
const remove = async (index, row) => {
  const res = await reqBannerRemove(row.id)
  console.log(res)
}
</script>

<style scoped lang="scss">
.container {
  height: 100%;

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
}
</style>
